<!-- 经验分享  -->
<template>
	<div class="collect-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-if="experienceList.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="collect">
					<div class="collect-item" v-for="item in experienceList" :key="item.id">
						<div class="collect-info">
							<van-row type="flex" justify="space-between">
								<van-col span="3">
									<div class="author-headpic">
										<van-image width="100%" height="100%" :src=item.HeadPic>
										</van-image>
									</div>
								</van-col>
								<van-col span="18">
									<div class="author-name">
										{{item.RealName}}
									</div>
									<div class="collect-time">
										{{item.AddTime}}
									</div>
								</van-col>
								<van-col span="3">
									
								</van-col>
							</van-row>
						</div>
						<div :class="'article-info ' + 'article-info-article'">
							<div class="article-title limit-one-line">
								<!--当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案-->
								{{item.Title}}
							</div>
							<div class="article-synopsis limit-two-line">
								<!--当前作品具作品前作品具体内容文案当文案当前作品当前作品具体-->
								{{item.Remark}}
							</div>
							<div v-if="item.AttaList.length>0">
								<div  v-for="fileItem in item.AttaList" :key="fileItem.id" class="article-accessory article-accessory-look">
									<div class="article-type">
										<van-image width="100%" height="100%" :src="require('../../assets/imgs/accessory-file.png')">
										</van-image>
									</div>
									<div class="article-attribute-box">
										<div class="article-name limit-one-line">{{fileItem.AttaName}}</div>
										<div class="article-attribute limit-one-line">
											格式:{{fileItem.AttaUrl.split('.')[fileItem.AttaUrl.split('.').length-1].toUpperCase()}} &nbsp; {{item.AddTime}}
										</div>
									</div>
									<div class="article-look" @click="viewDetail(fileItem.Id)">查看详情</div>
								</div>
							</div>
						
						</div>
					</div>
				</div>
			</van-list>
			<div v-else class="default-page">
				<default-page :hint="hint"></default-page>
			</div>
		</van-pull-refresh>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import NavBar from '../../components/NavBar.vue';
	import DefaultPage from '../../components/DefaultPage.vue'
	import {
		experience_api
	} from '../../api/index.js'

	export default {
		name: 'experience-share',
		components: {
			NavBar,
			DefaultPage
		},
		data() {
			return {
				refreshing: false,
				loading: false,
				finished: false,
				pageIndex: 1,
				title: '经验分享',
				isCollect: true,
				experienceList: [],
				list: [],
				hint: '暂无数据'
			}
		},
		activated() {
			this.getExperienceList(false)
		},
		methods: {
			onLoad() {
				setTimeout(() => {
					if (this.refreshing) {
						this.pageIndex = 1
						Toast('刷新成功');
					}else {
						this.pageIndex++
					}

					this.getExperienceList(false)

					this.loading = false;

				}, 1000);
			},
			activated() {
				this.getExperienceList(false)
			},
			onRefresh() {
				this.loading = true
				this.onLoad()
			},
			getExperienceList(is_push = true) {
				this.refreshing = false
				let data = {
					PageIndex: this.pageIndex,
				}
				experience_api.getExperienceList(data, (res) => {
					if (this.refreshing || !is_push) {
						this.experienceList = res
					} else {
						this.experienceList.push(...res)
					}
					this.refreshing = false
					console.info(this.refreshing)
					if (res.length < 20) {
						this.finished = true //已全部加载
					}
				})
			},
			viewDetail(id){
				console.info(id)
				this.$router.push({path:'/works',query:{id:id}});
			}
		}
	}
</script>

<style scoped>
	.collect-panel {
		padding-top: 0.88rem;
		background-color: #F6F5FB;
	}

	.collect {
		min-height: calc(100vh - 0.88rem);
		padding-top: 0.1rem;
	}

	.collect-item {
		background-color: #FFFFFF;
		margin: 0 0 0.1rem;
		padding-top: 0.36rem;
	}

	.collect-info {
		padding: 0 0.2rem;
		height: 0.76rem;
	}

	.author-headpic {
		width: 0.76rem;
		height: 0.76rem;
		margin: 0 auto;
	}

	.author-name {
		padding-left: 0.2rem;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 0.4rem;
	}

	.collect-time {
		padding-left: 0.2rem;
		height: 0.38rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8D8D8D;
		line-height: 0.38rem;
	}

	.is-collect {
		width: 0.32rem;
		height: 0.32rem;
		margin: 0 auto;
	}

	.article-info {
		padding: 0.2rem 0.28rem 0.2rem;
		text-align: left;
	}
	
	.article-info-article{
		padding-bottom: 0.3rem;
	}

	.article-title {
		height: 0.7rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.7rem;
	}

	.article-synopsis {
		height: 0.68rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
	}

	.article-accessory {
		width: 6.4rem;
		height: 1.12rem;
		margin-top: 0.2rem;
		background: #F8F8F8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
		
	.article-accessory-look{
		width: 6.96rem;
	}

	.article-type {
		width: 0.6rem;
		height: 0.6rem;
		min-width: 0.6rem;
		min-height: 0.6rem;
		margin-left: 0.24rem;
	}
	
	.article-attribute-box{
		width: 60%;
		margin-left: 0.2rem;
	}
	.article-name{
		height: 0.56rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.56rem;
	}
	.article-attribute{
		height: 0.28rem;
		font-size: 0.2rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		line-height: 0.28rem;
	}
	.article-look{
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FE4B4B;
		line-height: 0.4rem;
		margin: 0 auto;
	}
	.default-page {
		width: 100%;
		min-height: calc(100vh - 0.88rem);
		background: #ffffff;
	}
</style>
